<template>
  <div>
    <Title>
      <template #title>
        <span class="title">优秀新电台</span>
      </template>
    </Title>
    <div class="programs fpes">
      <div class="item" v-for="item in list" :key="item.id">
        <img :src="item.picUrl" :alt="item.name" class="cover cur_p" />
        <div class="text">
          <div class="name td_u cur_p">{{ item.name }}</div>
          <div class="desc">{{ item.rcmdtext }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Title from "../Title.vue";
import { PropType } from 'vue'
import { DjRadioType } from '../../types/types'

const props = defineProps({
  list: {
    type: Array as PropType<DjRadioType[]>,
    required: true
  }
})

</script>

<style lang="scss" scoped>
.title {
  font-size: 24px;
}
.programs {
  margin-top: 16px;
  min-height: 221px;
  .item {
    width: 150px;
    .name {
      width: 150px;
      color: #333;
      line-height: 16px;
      margin: 13px 0 6px;
    }
    .desc {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>